<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="810" @ok="handleSubmit">
    <a-transfer
      style="margin-left: 30px"
      :list-style="{ width: '350px', height: '350px' }"
      :data-source="sourceData"
      :titles="['未拥有', '已拥有']"
      :target-keys="targetKeys"
      :selected-keys="selectedKeys"
      :render="(item) => item.name"
      @change="handleChange"
      @select-change="handleSelectChange"
      @scroll="handleScroll"
    />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getUserHavePositionList, refreshUserPosition } from '../UserPosition.api';

  const emit = defineEmits(['register', 'success']);

  const userId = ref('');
  const sourceData = ref<any>([]);
  const targetKeys = ref<string[]>([]);
  const selectedKeys = ref<string[]>([]);
  const title = ref('职位管理');

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
    // console.log(data?.record)
    userId.value = data?.record.userId;
    title.value = '【' + data?.record.realname + '】的职位管理';
    await getUserHavePositionList({ userId: userId.value }).then((res) => {
      sourceData.value = [...res.userHavePositionList, ...res.userNoHavepositionList].map((item) => {
        item.key = item.id;
        return item;
      });
      targetKeys.value = res.userHavePositionList.map((item) => item.id);
    });
  });
  const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
    targetKeys.value = nextTargetKeys;
    console.log('targetKeys: ', nextTargetKeys);
    console.log('direction: ', direction);
    console.log('moveKeys: ', moveKeys);
  };
  const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
    selectedKeys.value = [...sourceSelectedKeys, ...targetSelectedKeys];
    console.log('sourceSelectedKeys: ', sourceSelectedKeys);
    console.log('targetSelectedKeys: ', targetSelectedKeys);
  };
  const handleScroll = (direction: string, e: Event) => {
    console.log('direction:', direction);
    console.log('target:', e.target);
  };
  async function handleSubmit() {
    try {
      setModalProps({ confirmLoading: true });
      //更新职位
      await refreshUserPosition({ userId: userId.value, positionIds: targetKeys.value });
      //关闭弹窗
      closeModal();
      //刷新列表
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }
  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>
